<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>        
        <title>easy</title>
    </h:head>
    <h:body>
        <ui:composition template="/pages/master/masterLayout.xhtml">
            <ui:define name="content">
                <h:form id="form" prependId="false">

                    <p:tabView id="tabView" dynamic="true">

                        <p:tab id="tabZahlungen" title="Zahlungen" >
                            <p:dataTable id="lstZahlungen" var="zahlung" value="#{zahlungBean.zahlungen}" selection="#{zahlungBean.selectedListItem}"
                                         rowKey="#{zahlung.id}" selectionMode="single" scrollable="true" scrollHeight="242">
                                <p:ajax event="rowSelect" update=":form:tabView:detailZahlung,:form:tabView:toolbar" />
                                <p:ajax event="rowUnselect" update=":form:tabView:detailZahlung,:form:tabView:toolbar" />

                                <p:column style="width:50px">
                                    <p:commandLink style="height: 15px">
                                        <h:graphicImage library="axialis/orange/16x16" name="Arrow2Up.gif" rendered="#{zahlung.zahlungsArt == 'ZAHLUNG'}"/>
                                        <h:graphicImage library="axialis/green/16x16"  name="Arrow2Down.gif" rendered="#{zahlung.zahlungsArt ==  'EINZAHLUNG'}"/>                                                                                                                                                                                                                                              
                                    </p:commandLink>                                                                            
                                </p:column>

                                <p:column id="colArt" sortBy="#{zahlung.zahlungsArt.art}" style="width:125px">
                                    <f:facet name="header">  
                                        Art  
                                    </f:facet>  
                                    <h:outputText value="#{zahlung.zahlungsArt.art}"/> 
                                </p:column>

                                <p:column id="colEmpaenger" sortBy="#{zahlung.empfaenger}" style="width:125px">
                                    <f:facet name="header">  
                                        Empfänger  
                                    </f:facet>  
                                    <h:outputText value="#{zahlung.empfaenger}" />  
                                </p:column>                    

                                <p:column id="colBetrag" sortBy="#{zahlung.betrag}" style="width:100px">
                                    <f:facet name="header">  
                                        Betrag [CHF]  
                                    </f:facet>  
                                    <h:outputText value="#{zahlung.betrag}" style="float: right">
                                        <f:convertNumber pattern="#,###,##0.00"/>  
                                    </h:outputText>  
                                </p:column>

                                <p:column id="colWaehrung" sortBy="#{zahlung.waehrung}" style="width:75px">
                                    <f:facet name="header">  
                                        Währung  
                                    </f:facet>  
                                    <h:outputText value="#{zahlung.waehrung}"/>
                                </p:column>

                                <p:column id="colHaeufigkeit" sortBy="#{zahlung.haeufigkeit.displayText}" style="width:125px">
                                    <f:facet name="header" >  
                                        Häufigkeit  
                                    </f:facet>  
                                    <h:outputText value="#{zahlung.haeufigkeit.displayText}"/>
                                </p:column>

                                <p:column id="colDatum" sortBy="#{zahlung.datumErsteAusfuehrung}" style="width:145px">
                                    <f:facet name="header" >  
                                        Ausführung  
                                    </f:facet>  
                                    <h:outputText value="#{zahlung.datumErsteAusfuehrung}">
                                        <f:convertDateTime pattern="dd.MM.yyyy"/>
                                    </h:outputText>  
                                </p:column>

                                <p:column id="colTag" sortBy="#{zahlung.betragTag}" style="width:125px">  
                                    <f:facet name="header">  
                                        Täglich [CHF]  
                                    </f:facet>  
                                    <h:outputText value="#{zahlung.betragTag}" style="float: right">
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>  
                                </p:column>

                                <p:column id="colMonat" sortBy="#{zahlung.betragMonat}" style="width:125px">  
                                    <f:facet name="header">  
                                        Monatlich [CHF] 
                                    </f:facet>  
                                    <h:outputText value="#{zahlung.betragMonat}" style="float: right">
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>  
                                </p:column>

                                <p:column id="colJahr" sortBy="#{zahlung.betragJahr}" style="width:125px">
                                    <f:facet name="header">  
                                        Jährlich [CHF] 
                                    </f:facet>  
                                    <h:outputText value="#{zahlung.betragJahr}" style="float: right">
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>  
                                </p:column>

                            </p:dataTable>                    
                            <p:separator id="separatorA"/>
                            
                            <p:toolbar id="toolbar">
                                <p:toolbarGroup id="toolbarGroup" align="left">
                                    <p:commandButton id="saveButton"                                                     
                                                     action="#{zahlungBean.saveEntity()}"
                                                     process="@form"
                                                     update="@form"   
                                                     icon="ui-icon-document"
                                                     title="Zahlung speichern"
                                                     disabled="#{!zahlungBean.listSelected}"/>

                                    <p:separator  /> 
                                    <p:commandButton id="neuButton"                                                     
                                                     action="#{zahlungBean.createEntity()}"
                                                     process="@form"                                                       
                                                     update="@form"
                                                     icon="ui-icon-document"
                                                     title="Zahlung als neuen Eintrag speichern"/>


                                </p:toolbarGroup>  
                                <p:toolbarGroup align="right">
                                    <p:commandButton id="deleteButton"                                                   
                                                     action="#{zahlungBean.deleteEntity()}"
                                                     icon="ui-icon-trash"                                                     
                                                     immediate="true"
                                                     update="@form"
                                                     disabled="#{!zahlungBean.listSelected}"/>
                                    <p:separator  /> 
                                    <p:commandButton id="resetButton"                                                     
                                                     immediate="true"
                                                     action="#{zahlungBean.reset()}"
                                                     icon="ui-icon-refresh"
                                                     title="Zurücksetzen"/>

                                </p:toolbarGroup>
                            </p:toolbar>
                            <p:separator id="separatorB"/>
                            <p:panelGrid id="detailZahlung" columns="2">


                                <p:outputLabel for="zahlungsart" value="Zahlungsart:" />
                                <p:selectOneMenu id="zahlungsart" value="#{zahlungBean.selectedEditItem.zahlungsArt}" effect="fade" converter="zahlungsArtConverter">
                                    <f:selectItems value="#{zahlungBean.zahlungsarten}" var="zahlungsart" itemLabel="#{zahlungsart.art}" itemValue="#{zahlungsart}"/>
                                </p:selectOneMenu>

                                <p:outputLabel for="empfaenger" value="Empfänger:" />  
                                <p:inputText id="empfaenger" value="#{zahlungBean.selectedEditItem.empfaenger}" required="true"/>


                                <p:outputLabel for="betrag" value="Betrag:" />  
                                <p:inputText id="betrag" value="#{zahlungBean.selectedEditItem.betrag}" required="true"/>



                                <p:outputLabel for="waehrung" value="Waehrung:" />
                                <p:selectOneMenu id="waehrung" value="#{zahlungBean.selectedEditItem.waehrung}" effect="fade" converter="waehrungConverter">
                                    <f:selectItems value="#{zahlungBean.waehrungen}" var="waehrung" itemLabel="#{waehrung.isoCode}" itemValue="#{waehrung}"/>
                                </p:selectOneMenu>


                                <p:outputLabel for="haeufigkeit" value="Haeufigkeit:" />
                                <p:selectOneMenu id="haeufigkeit" value="#{zahlungBean.selectedEditItem.haeufigkeit}" effect="fade" converter="haeufigkeitConverter">
                                    <f:selectItems value="#{zahlungBean.haeufigkeiten}" var="haeufigkeit" itemLabel="#{haeufigkeit.displayText}" itemValue="#{haeufigkeit}"/>
                                </p:selectOneMenu>


                                <p:outputLabel for="datum" value="Ausführung: " />  
                                <p:calendar value="#{zahlungBean.selectedEditItem.datumErsteAusfuehrung}" id="datum" showOn="button"/>


                            </p:panelGrid> 
                        </p:tab>
                        <p:tab id="tabCharts" title="Charts" disabled="#{zahlungBean.tabChartsDisabled}" >                            
                            <p:pieChart id="pieChart" value="#{chartBean.pieModel}" legendPosition="w" showDataLabels="true" dataFormat="value"  
                                        title="Monatliche Ausgaben [CHF]" style="width:500px;height:500px" diameter="350"/>
                        </p:tab>
                    </p:tabView>
                </h:form>
            </ui:define>
        </ui:composition>  
    </h:body>
</html>
